<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import HomeBanner from '../Home/components/HomeBanner.vue'
import ProductItem from '@/components/ProductItem.vue'
import HomeGoods from '../Home/components/HomeGoods.vue'
import { useCategoryInfo } from './composables/useCategoryInfo.js'

const { categoryInfo, categoryId } = useCategoryInfo()
</script>

<template>
  <div class="category">
    <div class="breadcrumb w">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/${categoryId}` }">{{
          categoryInfo?.name || ''
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="banner w">
      <HomeBanner distributionSite="2"></HomeBanner>
    </div>
    <div class="all-category w">
      <h3 class="title">全部分类</h3>
      <ul>
        <li v-for="category in categoryInfo.children || []">
          <router-link :to="{ path: `/category/sub/${category.id}` }">
            <HomeGoods :goods="category"></HomeGoods>
          </router-link>
        </li>
      </ul>
    </div>
    <div class="category-list w" v-for="category in categoryInfo.children || []">
      <h3 class="title">- {{ category.name }} -</h3>
      <ul>
        <li v-for="goods in category.goods || []">
          <ProductItem :goods="goods"></ProductItem>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped>
.title {
  height: 100px;
  font-size: 30px;
  line-height: 100px;
  text-align: center;
}

.category {
  .breadcrumb {
    .el-breadcrumb {
      height: 100%;
      line-height: 60px;
    }
  }

  .banner {
    height: 360px;
  }

  .all-category {
    ul {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;
      li {
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        a {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .category-list {
    margin-top: 20px;

    ul {
      display: flex;
      gap: 20px;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
